<%@page import="com.metacube.questionbank.model.User"%>
<%@page import="java.util.List"%>
<%@page import="com.metacube.questionbank.model.Tag"%>
<script src="js/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container tags">
	<h4>Tags</h4>
	<hr>
	<div>
		<p>A tag is a keyword or label that categorizes your question with
			other, similar questions. Using the right tags makes it easier for
			others to find and answer your question.</p>
	</div>
	<div id="tags_filter">
		<h3>Type to find tags</h3>
		<form method="get" action="tag_search.htm"> 
			<input type="text" name="tagfilter" id="tagfilter" placeholder="tags">
			<input type="submit" value="Search">
		</form> 
	</div>
	<div id="tags_list" class="jplist clearfix">
		<div class="jplist-panel panel-top clearfix" style="margin-bottom: 10px;">
			<div class="jplist-label" data-type="Page {current} of {pages}"
				data-control-type="pagination-info" data-control-name="paging"
				data-control-action="paging">
			</div>
			<div class="jplist-pagination" data-control-type="pagination"
				data-control-name="paging" data-control-action="paging"
				data-items-per-page="12">
			</div>
		</div>
		<div class="list text-shadow clearfix">
			<%	
				List<Tag> tags = (List<Tag>) request.getAttribute("tags");
				for (Tag q : tags) {			
			%>
			<div class="list-item">
				<div id="<%=q.getTagName()%>" class="col-md-4 tag_dv">
					<div>
						<ul>
							<li><a href="tag_questions.htm?id=<%=q.getTagId()%>" title="tag" rel="tag"><% out.print(q.getTagName());%></a></li>
							<li><span><% out.print(q.getNoOfQues()); %></span></li>
						</ul>
					</div>
					<div class="description">
						<%  out.print(q.getTagDesc()); %>
					</div>
				</div>
			</div>
			<% } %>
		</div>
		<div class="jplist-no-results text-shadow align-center">
			<p>No results found</p>
		</div>
		<!-- panel -->
		<div class="jplist-panel panel-bottom clearfix">
			
			<div 
			   class="jplist-label" 
			   data-type="{start} - {end} of {all}"
			   data-control-type="pagination-info" 
			   data-control-name="paging" 
			   data-control-action="paging">
			</div>
			
			<div 
			   class="jplist-pagination" 
			   data-control-type="pagination" 
			   data-control-name="paging" 
			   data-control-action="paging"
			   data-items-per-page="12">
			</div>
			
		</div>		
	</div>	
	<script>
		$('document').ready(function() {
			$('#tags_list').jplist({
				itemsBox : '.list',
				itemPath : '.list-item',
				panelPath : '.jplist-panel'
			});
		});
	</script>
</div>
<script>
function split(val) {
    return val.split(/,\s*/);
}
function extractLast(term) {
    return split(term).pop();
}

$('document').ready(function() {	
	
$("#tagfilter").autocomplete({
source: function (request, response) {
	  
	        $.getJSON("${pageContext. request. contextPath}/get_tag_list.json", {
	            term: extractLast(request.term)
	        }, response);
	    },
	    search: function () {
	        var term = extractLast(this.value);
	        if (term.length < 1 ) {
	            return false;
	        }
	    },
	    focus: function () {
	        return false;
	    },
	    select: function (event, ui) {
	        var terms = split(this.value);
	        terms.pop();
	        terms.push(ui.item.value);
	        terms.push("");
	        this.value = terms.join("");
	        return false;
	    }
	});
});
</script>